<template>
    <view :style="[pageStyle, themeVars]">
        <cl-header
            title="cl-login 演示"
            :left-show="true"
            :background-color="headerBgColor"
            :text-color="headerTextColor"
            @goback="() => uni.navigateBack()"
        />

        <view class="hero">
            <view class="hero-title" :style="textPrimaryStyle">cl-login</view>
            <view class="hero-sub" :style="textSecondaryStyle">统一登录/注册/找回密码交互</view>
        </view>

        <view class="section" :style="surfaceCardStyle">
            <view class="title" :style="textPrimaryStyle">切换模式</view>
            <view class="btns">
                <button class="btn" @click="mode = 'login'">登录</button>
                <button class="btn" @click="mode = 'register'">注册</button>
                <button class="btn" @click="mode = 'forgot'">忘记密码</button>
            </view>
        </view>

        <view class="section" :style="surfaceCardStyle">
            <cl-login :mode="mode" @submit="onSubmit" @switch-mode="(m: any) => (mode = m)" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useThemeStyles } from '@/composables/useThemeStyles/index'
import { useTheme } from '@/composables/useTheme'
const { pageStyle, surfaceCardStyle, textPrimaryStyle, textSecondaryStyle, headerBgColor, headerTextColor } = useThemeStyles()
const { getThemeVars } = useTheme()
const themeVars = computed(() => getThemeVars())
const mode = ref<'login' | 'register' | 'forgot'>('login')
const onSubmit = (data: any) => {
    uni.showToast({ title: '提交: ' + JSON.stringify(data), icon: 'none' })
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';

.hero {
    padding: $spacing-lg $spacing-lg 0;
}

.hero-title {
    font-size: $font-size-xxl;
    font-weight: $font-weight-bold;
}

.hero-sub {
    color: var(--theme-text-secondary, $text-secondary);
    margin-top: 6rpx;
}

.section {
    @include card-style($card-shadow, $border-radius-large);
    margin: $spacing-lg;
    padding: $spacing-xl;
}

.title {
    font-weight: $font-weight-bold;
    margin-bottom: $spacing-md;
}

.btns {
    display: flex;
    gap: $spacing-md;
}

.btn {
    @include button-style($primary-gradient, $border-radius-medium);
    height: 70rpx;
}
</style>
